<template>
  <div class="info-root sentinel-info-panel-root">
    <div class="info-title">
      集群流量监控(24小时维度)
      <el-tag type="info" style="margin-left: 10px;">{{ currentMachine.appName }}</el-tag>
    </div>
    <div class="info-content">
      <div style="width: 100%;height: 200px;margin-bottom: 10px;">
        <!-- 流量折线图 -->
        <chartLineMetric ref="ChartLineMetricRef">
        </chartLineMetric>
      </div>
      <el-descriptions :column="2" v-loading="rqLoading">
        <!-- row -->
        <el-descriptions-item label="请求数(S):">
          {{ info.success }}
        </el-descriptions-item>
        <el-descriptions-item label="异常数(E):">
          <el-tag class="fail-border fail-bg" effect="dark" v-if="info.exception > 0">{{ info.exception }}</el-tag>
          <span v-else>{{ info.exception }}</span>
        </el-descriptions-item>

        <!-- row -->
        <el-descriptions-item label="通过数(P):">
          {{ info.pass }}
        </el-descriptions-item>
        <el-descriptions-item label="阻塞数(B):">
          <el-tag class="fail-border fail-bg" effect="dark" v-if="info.block > 0">{{ info.block }}</el-tag>
          <span v-else>{{ info.block }}</span>
        </el-descriptions-item>

        <!-- row -->
        <el-descriptions-item label="最大QPS:">
          {{ info.maxQps }}
        </el-descriptions-item>
        <el-descriptions-item label="平均QPS:">
          {{ info.avgQps }}
        </el-descriptions-item>

        <!-- row -->
        <el-descriptions-item label="最小用时(minRt):">
          <el-tag class="fail-border fail-bg" effect="dark" v-if="info.minRt > 500">
            {{ info.minRt }}ms <span v-if="info.minRt > 500" style="font-weight: 700;">↑</span>
          </el-tag>
          <span v-else>{{ info.minRt <= 0 ? '<0' : '0' }}ms</span>
        </el-descriptions-item>
        <el-descriptions-item label="最大用时(maxRt):">
          <el-tag class="fail-border fail-bg" effect="dark" v-if="info.maxRt > 1000">
            {{ info.maxRt }}ms <span v-if="info.maxRt > 1000" style="font-weight: 700;">↑</span>
          </el-tag>
          <span v-else>{{ info.maxRt }}ms</span>
        </el-descriptions-item>

        <!-- row -->
        <el-descriptions-item label="平均用时(avgRt):">
          <el-tag class="fail-border fail-bg" effect="dark" v-if="info.avgRt > 500">
            {{ info.avgRt }}ms <span v-if="info.avgRt > 500" style="font-weight: 700;">↑</span>
          </el-tag>
          <span v-else>{{ info.avgRt }}ms</span>
        </el-descriptions-item>

      </el-descriptions>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, inject } from 'vue';
import { metricByAppRestfulApi } from '@/api/sentinel';
import chartLineMetric from './ChartLineMetric.vue';

// -------------------- inject
const currentMachine: any = inject('currentMachine')

const info = ref({
  minRt: 0,
  maxRt: 0,
  avgRt: 0,
  success: 0,
  exception: 0,
  pass: 0,
  block: 0,
  maxQps: 0,
  avgQps: 0,
})
const rqLoading = ref(true);
const ChartLineMetricRef = ref();


const getMetricByAppApi = () => {
  if (currentMachine === undefined || currentMachine.value.appName === '') {
    return;
  }
  rqLoading.value = true;
  let param = { appName: currentMachine.value.appName }
  metricByAppRestfulApi(currentMachine.value.appName, param).then(resp => {
    info.value = resp.data;
    setTimeout(() => {
      rqLoading.value = false;
    }, 300);
  })
}

const reload = () => {
  nextTick(() => {
    getMetricByAppApi();
    ChartLineMetricRef.value.reload();
  })
}

defineExpose({
  reload
})
</script>

<style scoped lang="scss">
.sentinel-info-panel-root {
  @include box(100%, 410px);
  min-height: 410px;
}
</style>
